<template>
	<view class="switchAddBox">
		<my-search cancelButton="none" :radius="100"></my-search>
		<view class="context">
			<!-- 一次性   重复性 -->
			<view class="switchTime">
				<view class="one-time">
					一次性日程
				</view>
				<view class="repeat" @click="jumpRepeat">
					重复性日程
				</view>
			</view>
			<!-- 模板选择 -->
			<view class="template">
				<view class="template-list" v-for="item in 8">
					<view class="template-item">

					</view>
					<view class="template-title">
						我是模板
					</view>
				</view>
				<view v-for="item in 5" style="width: 141rpx;">

				</view>
			</view>
			<!-- 推荐模板 -->
			<view class="advice-template">
				<view class="title">
					推荐模板
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			jumpRepeat() {
				uni.navigateTo({
					url: "./repeatDays/index"
				})
			}
		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	.advice-template {
		width: 94%;
		height: 292rpx;
		margin: 16rpx auto;
		padding: 0 32rpx;
		border-radius: 15rpx;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

		.title {
			display: inline-block;
			color: #707070;
			margin: 24rpx 0rpx;
			font-size: 28rpx;
		}
	}

	.template-item {
		width: 80rpx;
		height: 80rpx;
		background-color: #626262;
		border-radius: 5rpx;
	}

	.template-title {
		width: 100%;
		text-align: center;
		font-size: 16rpx;
		color: #707070;
	}

	.template-list {
		width: 80rpx;
		height: 110rpx;
		margin-left: 61rpx;
	}

	.template-list:nth-child(5n + 1) {
		margin-left: 0;
	}

	.template {
		width: 94%;
		height: auto;
		margin: 16rpx auto;
		display: flex;
		padding: 24rpx 32rpx;
		justify-content: space-around;
		flex-wrap: wrap;
		background-color: white;
		align-items: center;
		border-radius: 15rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}

	.switchTime {
		width: 100%;
		height: 180rpx;
		display: flex;
		justify-content: space-evenly;

		.one-time {
			width: 46%;
			height: 100%;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: white;
			font-size: 28rpx;
			color: #707070;
		}

		.repeat {
			height: 100%;
			width: 46%;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			background-color: white;
			align-items: center;
			font-size: 28rpx;
			color: #707070;
		}
	}

	.switchAddBox {
		height: 100%;
		min-height: 100vh;
		width: 100%;
		background-color: #DEDEDE;
	}

	.context {
		width: 100%;
		height: 100%;
	}
</style>
